<template>
  <div class="app-container">
    <ProTable
      :columns.sync="columns"
      :showSearch.sync="showSearch"
      :getList="getList"
      :loading="loading"
      :resetQuery="resetQuery"
      :tableData="tableData"
    >
      <template #pagination>
        <pagination
          v-show="total > 0"
          :total="total"
          :page-sizes="[10, 20, 50, 100, 200, 300, 500]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="routeNo">
              <el-input
                :placeholder="$t('行程')"
                clearable
                v-model="queryParams.routeNo"
                @keyup.enter.native="getList"
              />
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                :placeholder="$t('批次名')"
                clearable
                v-model="queryParams.name"
                @keyup.enter.native="getList"
              />
            </el-form-item>

            <el-form-item prop="status">
              <el-select clearable filterable @change="getList" :placeholder="$t('状态')" v-model="queryParams.status">
                <!-- 1 待配送 2 配送中 3 已完成 -->
                <el-option :label="$t('待配送')" value="1" />
                <!-- <el-option :label="$t('配送中')" value="2" /> -->
                <el-option :label="$t('已完成')" value="3" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions> </template>
      <template #status="{ row }">
        <!-- 1 待配送 2 配送中 3 已完成 (状态2 无用) -->
        <div v-if="row.status == 1" :style="{ color: $randomColor(row.status) }">{{ $t('待配送') }}</div>
        <div v-if="row.status == 2" :style="{ color: $randomColor(row.status) }">{{ $t('配送中') }}</div>
        <div v-if="row.status == 3" :style="{ color: $randomColor(row.status) }">{{ $t('已完成') }}</div>
      </template>

      <template #option="{ row }">
        <el-dropdown @command="(command) => handleCommand(command, row)">
          <span class="el-dropdown-link">
            {{ $t('更多') }}
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-hasPermi="['distribution:googleRouteShipments:list']" command="handleDetail">
              {{ $t('查看') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </ProTable>

    <!-- 详情 -->
    <Detail :show.sync="detail.show" :type="detail.type" :formData="detail.formData" @getList="getList" />
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import Detail from './components/detail.vue'
import { googleRouteShipmentsList } from '@/api/orderManage/allDispatch'

export default {
  components: { Detail },
  data() {
    return {
      // 批次 负责人 包裹号 地址 派送状态 送货人 送达时间 操作
      /**@type {ProTableColumns}*/
      columns: [
        { label: '批次', prop: 'name' },
        { label: '行程', prop: 'routeNo' },
        { label: '序号', prop: 'routePolyLineIndex' },
        { label: '负责人', width: 200, prop: 'nickNames', formatter: (v) => v?.toString() },
        { label: '包裹号', prop: 'packageNo' },
        { label: '地址', prop: 'address' },
        { label: '派送状态', prop: 'status', useSlot: true },
        { label: '送货人', prop: 'sendConfirmUser' },
        { label: '送达时间', prop: 'sendConfirmTime' },
        { label: '操作', prop: 'option', fixed: 'right', useSlot: true },
      ],
      /**字典数据 */
      dict_type_list: [],
      /**显示搜索*/
      showSearch: false,
      /**表格数据 */
      tableData: [],
      /**新增&修改弹窗 */
      detail: {
        show: false,
        type: '',
        formData: {},
      },
      /**数据总条数 */
      total: 0,
      /**表格加载状态 */
      loading: false,
      /**
       * @type {import('element-ui/types/loading').ElLoadingComponent}
       */
      loadingInstance: null,
      /**查询参数 */
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        xx2: '',
      },
    }
  },
  created() {
    this.getList()
    this.getDictList()
  },
  methods: {
    /**获取字典数据 */
    getDictList() {
      // this.useDict('dict_type').then(({ dict_type }) => (this.dict_type_list = dict_type))
    },
    handleCommand(command, row) {
      this[command](row)
    },

    handleDetail(row) {
      this.detail.formData = { ...row }
      this.detail.show = true
    },

    handleDelete(row) {
      this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          // api(row.id).then((res) => {
          //   if (res.code == 200) {
          //     this.$message({ type: 'success', message: res.msg })
          //     this.getList()
          //   }
          // })
        })
        .catch((e) => e)
    },
    startLoading() {
      this.loadingInstance = Loading.service({
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
    },
    endLoading() {
      this.loadingInstance?.close()
    },
    relaod() {
      this.getList()
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      googleRouteShipmentsList(this.queryParams)
        .then((res) => {
          this.tableData = res.rows
          this.total = res.total
        })
        .finally(() => (this.loading = false))
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = null))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss"></style>
